<template>
  <div class="sub-box">
    <!--排名-->
    <div class="sub-content">
      <!--<div class="sub-head">-->
      <!--<span class="b-l">排名</span>-->
      <!--<div class="more-info">-->
      <!--<router-link to="">-->
      <!--<span>更多</span> <i class="arrow-right"></i>-->
      <!--</router-link>-->
      <!--</div>-->
      <!--</div>-->
      <!--产品展示-->
      <!--<ul class="product-list">-->
      <!--<li v-for="n in 3">-->
      <!--<router-link to="/sommelierDetail">-->
      <!--<div class="img-box">-->
      <!--<img src="../../../assets/images/p-1.png" alt="">-->
      <!--</div>-->
      <!--<div class="name-info">-->
      <!--<span class="name">附近侍酒师</span>-->
      <!--<span class="distance-box">距离 <span class="distance-num">1.2km</span></span>-->
      <!--</div>-->
      <!--<div class="summary">-->
      <!--<span class="position">金牌代理</span>-->
      <!--<span class="gender">女</span>-->
      <!--<span class="age">28岁</span>-->
      <!--</div>-->
      <!--</router-link>-->
      <!--</li>-->
      <!--</ul>-->
    </div>
    <!--广告位-->
    <div class="sub-content">
      <div class="ad-box">
        <banner :listImg="listImg"></banner>
      </div>
    </div>
    <!--推荐-->
    <div class="sub-content">
      <div class="sub-head">
        <span class="b-l">推荐</span>
        <div class="more-info">

        </div>
      </div>

      <ul class="recommend-box">
        <li v-for="item in dataList">
          <router-link :to="'/sommelierDetail?id='+item.uid">
            <div class="img-box" ref="imgWidth">
              <img :src="sourceUrl+item.imageUrl" alt="">
            </div>
            <div class="name-info">
              <span class="name">{{item.name}}</span>
              <span class="distance-box">距离 <span class="distance-num">{{item.juli}}</span></span>
            </div>
            <div class="summary">
              <span class="position">{{item.level == 4 ? '银牌代理' : item.level == 5 ? '金牌代理' : '区域总代理'}}</span>
              <span class="gender">{{item.sex == 1 ? '男' : '女'}}</span>
              <span class="age">{{item.age}}岁</span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <span style="display: none">{{youChoiceCityName}}</span>
    <span style="display: none">{{testValue}}</span>
    <span style="display: none">{{agentFilter}}</span>
  </div>
</template>

<script>
  import global from '../../public/global.vue'

  export default {
    name: 'SubAgent',
    data() {
      return {
        dataList: [],
        listImg: [],
        sourceUrl: global.sourceUrl,
        newCity: '',
      }
    },
    methods: {
      getBanner() {
        let self = this;
        let url = global.apiUrl + "/sommelier"
        self.$http.get(url + "/banner", {}).then(res => {
          console.log(res.data.data);
          if (res.data.code == 0) {
            this.listImg = res.data.data
          }
        }).catch(function (err) {
          console.error("Error:" + err);
        })
      },
      getAgentList(result){
        console.log(result)
        this.$http.get(global.apiUrl + "/city/getCityId", {
          params: {city: result}
        }).then(res=>{
          let cityId = res.data.data;
          let self = this;
          let url = global.apiUrl;
          var p1=window.localStorage.getItem("latlng").split(",");
          self.$http.get(url + '/sommelier/getAgentList?longitude='+p1[0]+"&latitude="+p1[1]+"&cityId="+cityId).then(res => {
            self.dataList = res.data.data;
            for(let i=0;i<res.data.data.length;i++){
              let p2=new Array();
              p2[0]=res.data.data[i].longitude;
              p2[1]=res.data.data[i].latitude;
              let dis = AMap.GeometryUtil.distance(p1, p2);
//          if(dis<1000){
//            if(dis<10){
//              self.dataList[i].juli="贼近";
//            }else{
//              self.dataList[i].juli=dis.toFixed(1)+"m";
//            }
//
//          }else{
              if(dis<10){
                self.dataList[i].juli="0.01km";
              }else{
                self.dataList[i].juli=(dis/1000).toFixed(2)+"km";
              }
              //}
            }
          })
        }).catch(function(err){

        })
      }
    },
    computed: {
      'youChoiceCityName'() {
        let test = this.$store.getters.getCity;
        this.newCity = test;
        return test;
      },
      'testValue'(){
        let idx = global.getCookie("idx");
        let search = this.$store.state.search
        let url = global.apiUrl;
        var p1=window.localStorage.getItem("latlng").split(",");
        let cityId = global.getCookie("searchCityId")
        if(idx==1){
          this.$http.get(url + '/sommelier/getAgentList?longitude='+p1[0]+"&latitude="+p1[1]+"&cityId="+cityId+"&condition="+search).then(res => {
            this.dataList = res.data.data;
            for(let i=0;i<res.data.data.length;i++){
              let p2=new Array();
              p2[0]=res.data.data[i].longitude;
              p2[1]=res.data.data[i].latitude;
              let dis = AMap.GeometryUtil.distance(p1, p2);
//          if(dis<1000){
//            if(dis<10){
//              self.dataList[i].juli="贼近";
//            }else{
//              self.dataList[i].juli=dis.toFixed(1)+"m";
//            }
//
//          }else{
              if(dis<10){
                this.dataList[i].juli="0.01km";
              }else{
                this.dataList[i].juli=(dis/1000).toFixed(2)+"km";
              }
              //}
            }
          })
        }
        return  this.$store.state.search
      },
      'agentFilter'(){
        let test = this.$store.getters.getAgentFilter;
        //var p1 = window.localStorage.getItem("setSFilter").split(",");
        //console.log(p1)
        return test
      }
    },
    created: function () {
//      let self = this;
//      let url = global.apiUrl;
//      var p1=window.localStorage.getItem("latlng").split(",");
//      self.$http.get(url + '/sommelier/getAgentList?longitude='+p1[0]+"&latitude="+p1[1]+"&cityId="+cityId).then(res => {
//        self.dataList = res.data.data;
//        for(let i=0;i<res.data.data.length;i++){
//          let p2=new Array();
//          p2[0]=res.data.data[i].longitude;
//          p2[1]=res.data.data[i].latitude;
//          let dis = AMap.GeometryUtil.distance(p1, p2);
////          if(dis<1000){
////            if(dis<10){
////              self.dataList[i].juli="贼近";
////            }else{
////              self.dataList[i].juli=dis.toFixed(1)+"m";
////            }
////
////          }else{
//          if(dis<10){
//              self.dataList[i].juli="0.01km";
//          }else{
//            self.dataList[i].juli=(dis/1000).toFixed(2)+"km";
//          }
//          //}
//        }
//      })
      this.getBanner();
    },
    mounted() {
      setTimeout(() => {
        console.log(this.$refs.imgWidth);
        let width = this.$refs.imgWidth;
        for (let i = 0; i < width.length; i++) {
          this.$refs.imgWidth[i].style.height = width[0].clientWidth + 'px';
        }
      }, 100)
    },
    watch: {
      'newCity'(newValue) {
        this.getAgentList(newValue)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @bdradius: 8px;
  .sub-box {
    width: 100%;
    background: #f3f3f3;
    .sub-content {
      padding-bottom: 1px;
      margin-bottom: 10px;
      background: #fff;
      .sub-head {
        width: 100%;
        padding: 15px 10px 5px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        font-size: 1rem;
        .b-l {
          display: inline-block;
          height: 16px;
          line-height: 16px;
          padding-left: 5px;
          border-left: 4px solid #D44242;
        }
        .more-info {
          line-height: 19px;
          a {
            font-size: 0.9rem;
            color: #D44242;
            span {
              vertical-align: top;
            }
            a
            .arrow-right {
              display: inline-block;
              width: 10px;
              height: 10px;
              border-top: 2px solid #D44242;
              border-right: 2px solid #D44242;
              margin-left: -4px;
              transform: rotateZ(45deg) scale(0.6);
            }
          }
        }
      }

      /*广告位*/
      .ad-box {
        width: 100%;
        height: 150px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      /*推荐*/
      .recommend-box {
        width: 100%;
        padding: 0 10px;
        display: flex;
        flex-wrap: wrap;
        li {
          width: 49%;
          margin-right: 2%;
          border: 1px solid #eee;
          border-radius: @bdradius;
          margin-bottom: 10px;
          .img-box {
            width: 100%;
            img {
              width: 100%;
              height: 100%;
              border-radius: @bdradius;
            }
          }
          .name-info {
            /*height: 30px;*/
            /*line-height: 30px;*/
            padding: 0 2px;
            margin-top: 10px;
            font-size: 0.95rem;
            display: flex;
            justify-content: space-between;
            .name {
              font-weight: bold;
              color: #333;
            }
            .distance-box {
              font-size: 0.8rem;
              color: #D44242;
              margin-top: 2px;
            }
          }
          .summary {
            height: 30px;
            line-height: 30px;
            padding: 0 2px;
            font-size: 0.6rem;
            color: #fff;
            .position, .gender, .age {
              padding: 1px 5px;
              border-radius: 15px;
            }
            .position {
              background: #3ED3F2;
            }
            .gender, .age {
              background: #FF6978;
            }
          }
        }
        li:nth-child(even) {
          margin-right: 0;
        }
      }
    }
  }
</style>
